<template>
  <div class="bg_block">
    <headback :title="t('我创建的圣经')"></headback>
    <van-tabs :title-active-color="store.state.themeColor" title-inactive-color="#878787" v-model:active="active">
      <van-tab :title="t('释放中')">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list v-model:loading="loading" :offset="100" :immediate-check="false" :finished="finished"
            :finished-text="t('noMore')" @load="onLoad()">
            <template v-if="recordList && recordList.length > 0">
              <div v-for="(item, index) in recordList" :key="index" class="lock_item">
                <div>
                  <img :src="requireImg('btc.png')" alt="">
                </div>
                <div class="flex_all">
                  <div>{{ item.lockDate }}</div>
                  <div>
                    {{ item.title }}
                  </div>
                  <div class="remark">
                    {{ item.description }}
                    
                  </div>
                </div>
                <van-button class="look_btn" @click="goToPage('lockDetail',item)" type="primary">查看</van-button>
              </div>
            </template>
          </van-list>
        </van-pull-refresh>


  </van-tab>
  <van-tab :title="t('已释放')">
      <div  class="no_data" style="margin-top: 10px;"> {{ t('no_data') }} </div>
  </van-tab>
</van-tabs>
     
  </div>
</template>
<script setup>
import { showToast } from "vant";
import IndexDBCache from "@/hooks/sql/useOrder.js";
import "vant/es/toast/style";
import { useStore } from "vuex";
import bus from "@/utils/bus.js"
import { ref, reactive, onMounted, computed, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
import bankEth from "@/utils/bankEth"
import eth from "@/utils/eth"
import { splitAddress } from "@/utils/index.js";
import { useRouter } from "vue-router";
const router = useRouter();
const orderDB = new IndexDBCache()
const store = useStore();
const active = ref(0)
const requireImg = (imgPath) => {
  return new URL(`../../assets/images/${imgPath}`, import.meta.url).href;
};
const goToPage = (value, item) => {
  router.push({
    name: value,
    params:{
       id: item.id 
    }
  });
};
const pageSize = 10
const params = ref({
  page: 1,
  pageSize: pageSize
})
const allSum = ref(20)
const sumStart = (end) => {
  return (end - 20) > 0 ? (end - 20) : 0
}
const finished = ref(false);
const refreshing = ref(true);
const loading = ref(false)
const recordList = ref([])
const onLoad = async (accounts) => {
  if (refreshing.value) {
    params.value.page = 1;
    refreshing.value = false;
    recordList.value = []
  }
  try {
    debugger
    await orderDB.initDB()
    const account = accounts || await eth.getAccount()
    let data = await orderDB.getDataByIndex('lockList', 'create', account, params.value.page, params.value.pageSize)
    debugger
    recordList.value = [...recordList.value, ...data]
    loading.value = false;
    if (data.length == pageSize) {
      params.value.page = params.value.page + 1
    } else {
      finished.value = true;
    }
  } catch (err) {
    loading.value = false;
    finished.value = true;
  }
}
const onRefresh = async () => {
  finished.value = false;
  refreshing.value = true;
  params.value.start = sumStart(allSum.value);
  params.value.end = allSum.value - 1;
  recordList.value = [];
  loading.value = true;
  onLoad();
};
const initData = async ()=>{
  await onLoad()
  await bankEth.normalLocksForUser()
}
const fn = ()=>{
  bus.on("init",(value)=>{
    initData()
  })
}
onUnmounted(()=>{
  bus.off("init")
})
onMounted(() => {
  initData();
  fn()
});
</script>

<style lang="scss" scoped>
:deep .van-badge__wrapper{
  display: flex;
  align-items: center;
  color: #eee;

}
:deep .van-tabs__nav .van-tabs__line {
    border-radius: 5px;
    bottom: 22px;
  }
.bg_block{
  margin-top: 48px;
  padding: 0 14px 30px 14px;
  box-sizing: border-box;
}
.group_all{
  margin-top: 12px;
}
.lock_item{
  display: flex;
  background: #f2f2f2;
  border-radius: 6px;
  margin-top: 6px;
  gap: 5px;
  padding:14px 8px;
  img{
    height: 30px;
    width: 30px;
  }
  .flex_all{
    flex: 1;
    .remark{
      color: #999;
    }
  }
  .look_btn{
    width: 60px;
    height: 26px;
    border-radius: 14px;
  }
}

</style>
